<!--
 * @Author: hu_binbin
 * @Date: 2021-08-20 10:08:30
 * @LastEditTime: 2021-08-21 15:15:04
 * @Description: 巡视查询 （信息查询 - 巡视计划查询）
-->
<template>
	<article class="bg_4dbfae">
		<Theader :title="title">
			<template slot="header_arrow">
				<van-icon size="25" name="arrow-left" @click="$pageBack"/>
			</template>
			<template slot="header_icon">
                <van-image class="imgSize" width="23" height="23" @click="rfidBtn" :src="icon.rfid" />
                <van-image class="imgSize" width="20" height="20" @click="scanBtn" :src="icon.scan" />
			</template>
		</Theader>
        <div class="content">
            <van-tabs v-model="active" color="#0EB295" title-active-color="#0EB295" animated swipeable>
                <van-tab title="巡视任务">
                    <div>
                        <!-- 搜索区域 -->
                        <div class="search_header center_center">
                            <van-search v-model.trim="taskName" clearable @input="taskFocus" background="#F5F6FA" placeholder="请输入变电站名称">
                            </van-search> 
                            <van-image class="imgSize" width="23" height="23" @click="showTaskScreen=true" :src="icon.screen" />
                        </div>

                        <!-- 列表区域 -->
                        <div class="doc-wrapper">
                            <van-pull-refresh v-model="taskRefreshing" @refresh="onTaskRefresh">
                                <van-list
                                offset="0"
                                v-model="taskLoading"
                                :finished="taskFinished"
                                finished-text="没有更多了"
                                @load="onLoadTask"
                                >
                                    <div class="tab-item" @click="gotoTaskDetail" v-for="(item,index) in showTaskList" :key="index">
                                        <div class="tab-title">
                                            <span>待执行</span>
                                            <label>花园山变电站例行巡视</label>
                                        </div>
                                        <div class="tab-sub">
                                            <span>交花园山变电站</span>
                                            <label>交流110kv</label>
                                        </div>
                                        <div class="tab-per tab-per-flex">
                                            <div class="flex-center">
                                                <van-icon size="18" name="user-circle-o" />
                                                <span style="margin-left: 5px;">登记人：</span>
                                                <label>巡视人、巡视人</label>
                                            </div>
                                        </div>
                                        <div class="tab-time">
                                            <div class="time-t">
                                                <van-icon size="18" name="underway-o" />
                                                <span>巡视计划时间：</span>
                                            </div>
                                            <div class="time-cont">2020/06/09 09:21</div>
                                        </div>
                                    </div>
                                </van-list>
                            </van-pull-refresh>
                        </div>
                    </div>
                </van-tab>
                <van-tab title="巡视记录">
                    <!-- 搜索区域 -->
                    <div class="search_header center_center">
                        <van-search v-model.trim="recordName" clearable @input="taskFocus" background="#F5F6FA" placeholder="请输入变电站名称">
                        </van-search> 
                        <van-image class="imgSize" width="23" height="23" @click="showRecordScreen=true" :src="icon.screen" />
                    </div>

                    <!-- 列表区域 -->
                    <div class="doc-wrapper">
                        <van-pull-refresh v-model="recordRefreshing" @refresh="onRecordRefresh">
                            <van-list
                            offset="0"
                            v-model="recordLoading"
                            :finished="recordFinished"
                            finished-text="没有更多了"
                            @load="onLoadRecord"
                            >
                                <div class="tab-item" @click="gotoRecordDetail" v-for="(item,index) in showRecordList" :key="index">
                                    <div class="tab-title">
                                        <label>下关变电站例行巡视</label>
                                    </div>
                                    <div class="tab-sub">
                                        <span>交流110kv</span>
                                        <label>三类变电站</label>
                                    </div>
                                    <div class="tab-per tab-per-flex">
                                        <div class="flex-center">
                                            <van-icon size="18" name="user-circle-o" />
                                            <span style="margin-left: 5px;">记录人：</span>
                                            <label>唐晓东、唐晓东</label>
                                        </div>
                                    </div>
                                    <div class="tab-time">
                                        <div class="time-t">
                                            <van-icon size="18" name="underway-o" />
                                            <span>巡视计划时间：</span>
                                        </div>
                                        <div class="time-cont">2020/06/09 09:21</div>
                                    </div>
                                </div>
                            </van-list>
                        </van-pull-refresh>
                    </div>
                </van-tab>
            </van-tabs>
        </div>
        <van-popup
		@close="showTaskScreen=false"
		v-model="showTaskScreen"
		closeable
		close-icon-position="top-left"
		position="right"
		:style="{ width: '80%',height:'100%'}"
		>
			<taskScreen></taskScreen>
        </van-popup>
        
        <van-popup
		@close="showRecordScreen=false"
		v-model="showRecordScreen"
		closeable
		close-icon-position="top-left"
		position="right"
		:style="{ width: '80%',height:'100%'}"
		>
			<recordScreen></recordScreen>
		</van-popup>
	</article>
</template>
<script>
    import Theader from "../component/header"
    import taskScreen from "../component/taskScreen"
    import recordScreen from "../component/recordScreen"
    
	export default {
		name: "defectDangerList",
		components:{
            Theader,
            taskScreen,
            recordScreen
		},
		data() {
			return {
				title: "巡视查询",
				icon: {
					rfid:require('../../../../assets/tour/icon-rfid.png'),
					scan:require('../../../../assets/tour/icon-scan.png'),
					screen:require('../../../../assets/tour/icon-screen.png'),
					add:require('../../../../assets/tour/icon-add.png'),
                },
                active: 0,
                showTaskScreen:false,//展示巡视任务筛选框
                showRecordScreen:false,//展示巡视记录筛选框
				showTaskList:[
					{},{}
                ],
                showRecordList:[
					{},{}
                ],
                showhead: false,//标题头显示 （组件需要）
                taskName: "",//任务名称
                recordName:"",//记录名称
                taskRefreshing: false,
                recordRefreshing:false,
                taskLoading:false,
                taskFinished:false,
                recordLoading:false,
                recordFinished:false,
			}
		},
		computed: {
            
		},
		methods: {
			onTaskRefresh() {

            },
            onRecordRefresh() {

            },
			taskFocus() {

            },
            recordFocus() {

            },
			onLoadTask() {
				
            },
            onLoadRecord() {
				
			},
			addTask() {
				
            },
            rfidBtn() {

            },
            scanBtn() {
                
            },
			/**
			* @description: 跳转巡视任务
			* @param {*}
			* @return {*}
			*/
			gotoTaskDetail() {
				this.$router.push({
                    name: "scheduling",
                    query:{
                        title:"巡视详情"
                    }
				})
            },
            /**
			* @description: 跳转巡视记录（归档详情）
			* @param {*}
			* @return {*}
			*/
            gotoRecordDetail() {
                this.$router.push({
					name: "cyclelFileDetail",
				})
            }
		},
		watch: {
			
        },
        filters:{
            //处理状态
            dealSta(i) {
                var name = '未处理'
                if(i == 1){
                    name = '已处理'
                }
                return name;
            },
            //隐患等级
            dangerGrade(i) {
                var name = '一般隐患'
                if(i == 0){
                    name = '严重隐患'
                }else if(i == 1) {
                    name = '危急隐患'
                }
                return name;
            }
        },
		mounted() {

		}
	}
</script>
<style scoped>
	article {
		display: flex;
		flex-direction: column;
		height: 100vh;
	}
	.bg_4dbfae{
		background: #F5F6F7 ;
	}
	.center_center{
        display:flex;
        justify-content:center;
        align-items:center;
	}

    .search_header{
		margin-top: 0.7rem;
		margin-right: 0.7rem;
	}
	.search_header /deep/ .van-search{
		flex:1;
	}
	.search_header /deep/ .van-search__content{
		background: #fff;
		border-radius: 0.7rem;
	}
    .doc-wrapper{
		overflow-y: auto;
		height: calc(100% - 212px);
		margin: 0.6rem;
	}
    .tab-item{
        padding: 0.7rem 1rem;
		background: #fff;
		position: relative;
		overflow: hidden;
        margin-bottom: 0.7rem;
	}
    .tab-icon{
		display: flex;
		position: absolute;
		right: -7%;
		top: 9%;
		transform: rotate(45deg);
	}
    .box3{
		width: 100px;
		z-index: 10;
		font-size: 13px;
		line-height: 24px;
		text-align: center;
		height: 24px;
		background: #18B49B;
		color: #fff;
	}
    .tab-title{
		font-size: 15px;
		font-weight: bold;
		color:#333;
		padding: 0.5rem 0px;
	}
	.tab-title span{
		color:#0EB295;
		margin-right: 10px;
	}
	.tab-sub{
		margin-bottom: 0.7rem;
        margin-top: 0.7rem;
		font-size: 13px;
    	color: #999;
	}
	.tab-per,.tab-time{
        display: flex;
        align-items: center;
		margin-bottom: 0.7rem;
		font-size: 13px;
    	color: #666;
        /* justify-content:space-between; */
	}
	.tab-per-flex{
		display: flex;
		justify-content: space-between;
	}
    .time-t{
        display: flex;
		justify-content: space-between;
    }
    .time-cont{
        width: 40%;
    }
    .time-it{
        flex: 1;
        display: flex;
        justify-content: flex-end;
    }
	.time-b{
       width: 4.5rem; 
       font-size: 12px;
    }
	.flex-center{
		display: flex;
		align-items: center;
	}
    .content{
        margin-top: 45px;
    }
</style>
